<template>
  <div class="menu_content">
    <div class="leftMenu" @click="scroll('left')" v-show="showLeftMenu"><img src="@/assets/img/leftMenu.png" alt=""></div>
    <div class="rightMenu" @click="scroll('right')" v-show="showRightMenu"><img src="@/assets/img/rightMenu.png" alt="">
    </div>
    <div class="Menu" ref="Menu">
      <div class="Menu_box" ref="Menu_box">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :collapse-transition="false">
          <el-submenu :style="{ marginRight: getMarginRight }" :index="item.menuUrl" :popper-class="`haha menuIndex${index}`"
            v-for="(item, index) in menus" :key="index" :class="active(item)">
            <template slot="title">
              <!-- <router-link :to="item.routeName" class="white">{{
                  item.title
              }}</router-link> -->
              <div @click="routerLink(item)" :style="{ width: getWidth }"
                :class="[MenuIndex === item.id ? 'bgColor' : '']">
                {{
                  item.menuName }}</div>
            </template>
            <!-- <Topmenu :menuData="items" :index="items.title" v-for="(items, indexs) in item.children" :key="indexs" /> -->
            <div v-for="(items, indexs) in item.children" :key="indexs"
              :class="item.direct === 'transverse' ? 'transverse' : ''">
              <el-menu-item v-if="!items.children" :index="items.menuUrl" @click="routerLink(items)">{{
                items.menuName
              }}</el-menu-item>
              <Topmenu @handleMenu="handleMenu" :menuData="items" v-else />
            </div>
          </el-submenu>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
import Topmenu from "./component/TopMenu.vue";
import qiankunActions from "../micros/action";
import { getDdPmsToken } from "../api/user";
export default {
  name: "NavigationMenu",
  components: {
    Topmenu
  },
  data() {
    return {
      activeIndex: "0",
      activeRoute: "/EDManagement",
      type: "",
      showLeftMenu: true,
      showRightMenu: true,
      timer: null,
      clickMenuNum: 0,
      getWidth: "",
      getMarginRight: ""
    };
  },
  computed: {
    active() {
      return (item) => {
        return false;
      };
    },
    MenuIndex() {
      return Number(this.$store.state.MenuIndex);
    },
    menus() {
      return this.$store.state.menuTree;
    }
  },
  watch: {
    scrollMenuBoxWidth() {
      this.toggleBtnVisibility();
    },
    scrollMenuWidth() {
      this.toggleBtnVisibility();
    },
    showLeftMenu: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.showLeftMenu = newVal;
        }
      }
    },
    showRightMenu: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.showRightMenu = newVal;
        }
      }
    },
    clickMenuNum: {
      handler(newVal, oldVal) {
        const pathLength = this.$store.state.menuTree.length;
        if (newVal > 0) {
          this.showLeftMenu = true;
        } else {
          this.showLeftMenu = false;
        }
        if (newVal === pathLength - 11 || pathLength - 11 < 0) {
          this.showRightMenu = false;
        } else {
          this.showRightMenu = true;
        }
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.toggleBtnVisibility();
      this.setMenuBoxWidth();
    }, 500);
  },
  methods: {
    setMenuBoxWidth() {
      const menuBox = this.$refs.Menu_box;
      if (menuBox) {
        const parentWidth = menuBox.offsetWidth;
        const calculatedWidth = (parentWidth / 11) * 0.8;
        this.getWidth = calculatedWidth + "px";
        const calculatedMarginRight = (parentWidth / 11) * 0.21;
        this.getMarginRight = calculatedMarginRight + "px";
      }
    },
    toggleBtnVisibility() {
      const pathLength = this.$store.state.menuTree.length;
      this.showLeftMenu = this.clickMenuNum > 0;
      this.showRightMenu = this.clickMenuNum < pathLength - 11 && pathLength > 11;
    },
    scroll(direction) {
      const pathLength = this.$store.state.menuTree.length;
      const transformWidth = this.$refs.Menu_box.offsetWidth / pathLength;
      let left = Number((this.$refs.Menu_box.style.left || "0px").split("p")[0]);
      if (direction === "left") {
        left += transformWidth;
        this.clickMenuNum > 0 && this.clickMenuNum--;
      } else if (direction === "right") {
        left -= transformWidth;
        this.clickMenuNum >= 0 && this.clickMenuNum < pathLength - 11 && this.clickMenuNum++;
      }
      this.$refs.Menu_box.style.left = `${left}px`;
      this.toggleBtnVisibility();
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    routerLink(item) {
      // 删除系统配置中缓存
      sessionStorage.removeItem("orgCheckId");
      sessionStorage.removeItem("sysMenu");
      sessionStorage.removeItem("rolCheckId");
      if (item.parent && item.parent != "1480016250535968") {
        this.$store.commit("SET_MenuIndex", item.parent);
      } else {
        this.$store.commit("SET_MenuIndex", item.id);
      }
      this.activeRoute = item.menuUrl.replace("/", "");
      if (item.menuUrl.includes("operation-monitoring") || item.menuUrl.includes("power-grid-picture")) {
        const YXJCTOKEN = sessionStorage.getItem("YXJCTOKEN"); // { TOKEN: '', time: '' }
        let tobj;
        if (!YXJCTOKEN) {
          tobj = { TOKEN: "", time: "1635501600000" };
        } else {
          tobj = JSON.parse(YXJCTOKEN);
        }
        if ((+new Date() - Number(tobj.time)) > 900000) { // token 有效期为15分钟
          getDdPmsToken().then(res => {
            console.log("获取第三方token", res);
            const resp = JSON.parse(res);
            const TOKEN = resp.data.accessToken || "1480023250535968941f4d3170d55a9c";
            const tokenObj = { TOKEN, time: +new Date() };
            sessionStorage.setItem("YXJCTOKEN", JSON.stringify(tokenObj));
            qiankunActions.setGlobalState({ TOKEN });
            this.$router.push(item.menuUrl);
          });
        } else {
          const TOKEN = tobj.TOKEN;
          qiankunActions.setGlobalState({ TOKEN });
          this.$router.push(item.menuUrl);
        }
      } else {
        if (item.menuUrl.split("/")[1] == "web") {
          window.history.pushState(null, "", item.menuUrl);
        } else {
          this.$router.push(item.menuUrl);
        }
      }
      window.dispatchEvent(
        new PopStateEvent("popstate", { state: null })
      );
    },
    handleMenu(val) {
      if (val.parent && val.parent != "1480016250535968") {
        this.$store.commit("SET_MenuIndex", val.parent);
      } else {
        this.$store.commit("SET_MenuIndex", val.id);
      }
    }
  }
};
</script>
<style scoped lang="less">
// @subMenuWidth: calc((100vw / 11) * .8);
// @subMenuPadding: calc((100vw / 11) * .164);

.menu_content {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;

  .leftMenu,
  .rightMenu {
    cursor: pointer;

    img {
      width: 30px;
      height: 30px;
    }
  }

  .leftMenu {
    position: absolute;
    top: 12px;
    left: 10px;
    z-index: 999;
  }

  .rightMenu {
    position: absolute;
    top: 12px;
    right: 10px;
    z-index: 999;
  }

  .Menu {
    width: 95%;
    position: relative;
    display: flex;
    overflow: hidden;
    z-index: 99;

    .Menu_box {
      width: 100%;
      margin: 8px 0 15px 0;
      box-sizing: border-box;
      position: relative;
      left: 0px;
      transition: left 0.5s ease 0s;
      // transition: transform 3s ease-in-out;
      // .el-menu-demo {
      //   position: relative;
      //   // top: 10px;
      // }
    }

    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
}

.bgColor {
  // width: @subMenuWidth;
  height: 38px;
  box-sizing: border-box;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 1px 1px 10px 2px rgba(251, 211, 89) inset !important;
  background-color: rgba(255, 203, 34, 0.45) !important;
  // border: 1px solid #fbd359 !important;
  color: #fff !important;
}

.el-dropdown {
  vertical-align: top;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-button-group .el-button {
  padding: 8px 20px;
}

:deep(.el-menu.el-menu--horizontal) {
  background-color: transparent;
  border-bottom: none;
  display: flex;
  // justify-content: space-between;
  flex-wrap: no-wrap;
  // margin: 8px 0 15px 0;

  .el-submenu {
    position: relative;
    border-bottom: none;
    background: rgba(46, 88, 219, 0.1);
    box-shadow: 1px 1px 10px 2px rgb(54, 175, 255) inset;
    border-radius: 6px;
    color: #fff;
    // margin-right: @subMenuPadding;
    box-sizing: border-box;

    &:hover {
      opacity: 0.9;
    }
  }

  >.el-submenu:focus .el-submenu__title {
    color: #fff;
    font-weight: bold;
    // box-shadow: 2px 2px 8px 3px rgba(251, 211, 89) inset;
    // background-color: rgba(255, 191, 0, 0.45);
    /* 标准的语法 */
  }

  >.el-submenu.is-active .el-submenu__title {
    border-bottom: none;
    color: #fff;
    // font-weight: bold;
    // box-shadow: 2px 2px 8px 3px rgba(251, 211, 89) inset;
    // background-color: rgba(255, 191, 0, 0.45);
    /* 标准的语法 */
  }

  .el-submenu__title {
    // min-width: @subMenuWidth;
    height: 38px;
    font-size: 18px;
    line-height: 38px;
    box-sizing: border-box;
    // padding: 0 5%;
    color: #fff;
    border-radius: 6px;
    border-bottom: none;
    text-align: center;
    padding: 0;
    font-weight: 700;

    &:hover {
      // font-weight: bold;
      border-radius: 6px;
      box-shadow: 1px 1px 10px 2px rgba(251, 211, 89) inset;
      background-color: rgba(255, 219, 102, 0.45);
      // border: 1px solid #fbd359;
      color: #fff;
      box-sizing: border-box;
      padding: 0;
    }
  }
}

:deep(.el-submenu__icon-arrow.el-icon-arrow-down) {
  display: none;
}
</style>
